var clientWidth = document.documentElement.scrollWidth; //获取屏幕尺寸
var scale = clientWidth / 1920; //缩放比例

/**
 * 左一图表
 */
function initLeftChartOne(nameData, data) {
  var leftChartOneLeft = echarts.init(
    document.getElementById("left-chart-one")
  );
  var salvProName = nameData;
  var salvProValue = data;
  var salvProMax; //最大值
  var percent = [];
  var num = 0;
  for (var i = 0; i < salvProValue.length; i++) {
    num = num + salvProValue[i];
  }
  salvProMax = num;
  for (var i = 0; i < salvProValue.length; i++) {
    percent.push((salvProValue[i] / salvProMax) * 100);
  }
  var leftChartOneLeftOption = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "-10%",
      top: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      textStyle: {
        color: "#ffffff"
      },
      backgroundColor: "rgba(5, 27, 98, 0.75)",
      borderColor: "rgba(2, 13, 65, 1)",
      formatter: function (params) {
        return params[0].name + " : " + ((params[0].value / salvProMax) * 100).toFixed(2) + "%";
      },
    },
    xAxis: {
      show: false,
      type: "value",
      max: salvProMax,
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 14 * scale,
          },
          interval: 0,
          inside: true,
          color: "#606266",
          margin: 0,
          padding: [0, 0, 10, 0],
          align: "left",
          verticalAlign: "bottom",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true, // 显示右侧的文字
        axisLabel: {
          formatter: "{value}万人",
          textStyle: {
            color: "#ECF2F5",
            fontSize: 14 * scale,
          },
        },
        data: salvProValue,
      },
    ],
    series: [
      {
        name: "蓝色进度条",
        type: "bar",
        hoverAnimation: false,
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#1890FF",
              },
              {
                offset: 1,
                color: "#1EE7E7",
              },
            ]),
          },
        },
        barWidth: 10,
        data: salvProValue,
        label: {
          normal: {
            show: true,
            formatter: params => {
              return ((params["data"] / salvProMax) * 100).toFixed(2) + "%";
            },
            position: "right",
            textStyle: {
              color: "#ECF2F5",
              fontSize: 12 * scale,
            },
          },
        },
      },
      {
        name: "背景",
        type: "bar",
        hoverAnimation: false,
        barWidth: 10,
        barGap: "-100%",
        data: salvProValue.map(item => {
          return salvProMax;
        }),
        itemStyle: {
          normal: {
            color: "rgba(48,58,76,0.4)",
            barBorderRadius: 5,
          },
        },
      },
    ],
  };
  leftChartOneLeft.setOption(leftChartOneLeftOption);
}

/**
 * 左二左图表
 */

function initLeftChartTwoLeft(leftTwoNamePageLeft, leftTwoDataPageLeft) {
  var leftChartTwoLeft = echarts.init(
    document.getElementById("left-chart-two-left")
  );
  var leftChartTwoLeftOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      textStyle: {
        color: "#ffffff"
      },
      backgroundColor: "rgba(5, 27, 98, 0.75)",
      borderColor: "rgba(2, 13, 65, 1)",
      formatter: function (params) {
        return params[0].name + " : " + params[0].value + "%";
      },
    },
    grid: [
      {
        top: "2%",
        left: "10%",
        bottom: "-10%",
        containLabel: true,
      },
    ],
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: false,
          textStyle: {
            color: "#303A4C",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: leftTwoNamePageLeft,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 12 * scale,
          },
          interval: 0,
          inside: true,
          margin: 0,
          padding: [15 * scale, 135 * scale, 10 * scale, 0],
          align: "right",
          verticalAlign: "top",
          formatter: function (value) {
            return value + "%";
          },
        },
        data: leftTwoDataPageLeft,
      },
    ],
    series: [
      {
        name: "完成率",
        type: "bar",
        zlevel: 1,
        silent: false,
        label: {
          normal: {
            color: "#FFFFFF",
            show: true,
            position: [0, -22 * scale + "px"],
            textStyle: {
              fontSize: 14 * scale,
            },
            formatter: function (a, b) {
              return a.name;
            },
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#1890FF",
              },
              {
                offset: 1,
                color: "#1EE7E7",
              },
            ]),
          },
        },
        barWidth: 10,
        data: leftTwoDataPageLeft,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-100%",
        data: [100, 100, 100, 100],
        itemStyle: {
          normal: {
            color: "rgba(48,58,76,0.4)",
            barBorderRadius: 30,
          },
        },
      },
    ],
  };
  leftChartTwoLeft.setOption(leftChartTwoLeftOption);
}

/**
 * 左二右图表
 */

function initLeftChartTwoRight(
  leftTwoNamePageRight,
  leftTwoDataPageRight,
  data,
  year
) {
  var leftChartTwoRight = echarts.init(
    document.getElementById("left-chart-two-right")
  );
  let value = data;
  let legendName = leftTwoNamePageRight;
  var img =
    "";
  var leftChartTwoRightOption = {
    color: ["rgba(32,172,76,1)", "rgba(25,120,150,1)", "rgba(31,140,127,1)"],
    title: [
      {
        text: "{a|" + value + "}",
        x: "center",
        y: "center",
        textStyle: {
          rich: {
            a: {
              fontSize: 18 * scale,
              color: "#fff",
              lineHeight: 25,
            },
          },
        },
      },
      {
        text: "{a| 人次}",
        x: "center",
        y: "51%",
        textStyle: {
          rich: {
            a: {
              fontSize: 16 * scale,
              color: "#fff",
              lineHeight: 25,
            },
          },
        },
      },
      {
        text: "高血压患者随访方式分类统计(" + year + ")",
        textStyle: {
          color: "#FAFFFD",
          fontSize: 15 * scale,
          fontWeight: 400,
        },
        itemGap: 20,
        x: "center",
        y: "5%",
      },
    ],
    tooltip: {
      show: true,
      trigger: "item",
      textStyle: {
        color: "#ffffff",
        fontSize: 14 * scale
      },
      backgroundColor: "rgba(5, 27, 98, 0.75)",
      borderColor: "rgba(2, 13, 65, 1)",
      formatter: "{b}:  {c}人  ({d}%)",
    },
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 100 * scale,
            height: 100 * scale,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    legend: [
      {
        icon: "circle",
        data: legendName,
        left: "center",
        bottom: "0%",
        textStyle: {
          color: "#fff",
          fontSize: 12 * scale,
        },
        itemGap: 10 * scale, //间距
        itemHeight: 13 * scale,
      },
    ],
    series: [
      {
        type: "pie",
        hoverAnimation: false,
        hoverOffset: 25,
        startAngle: 180, //起始角度
        clockwise: false, //是否顺时针
        radius: [54 * scale + "%", 66 * scale + "%"],
        center: ["center", "center"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          color: "#fff",
          fontSize: 18 * scale,
          formatter: function (params) {
            return params.name + "(" + params.value + "所)";
          },
        },
        emphasis: {
          label: {
            color: "rgb(157,251,255)",
            fontWeight: 400,
            fontSize: 12 * scale,
          },
          labelLine: {
            lineStyle: {
              color: "rgb(157,251,255)",
            },
          },
        },
        data: leftTwoDataPageRight,
        itemStyle: {
          normal: {
            borderWidth: 5, // 间距的宽度
            borderColor: "rgba(2, 11, 61,1)", //背景色
          },
        },
        zlevel: 30,
      },
    ],
  };
  leftChartTwoRight.setOption(leftChartTwoRightOption);
}

/**
 * 左三左图表
 */

function initLeftChartThreeLeft(leftThreeNamePageLeft, leftThreeDataPageLeft) {
  var leftChartThreeLeft = echarts.init(
    document.getElementById("left-chart-three-left")
  );
  var leftChartThreeLeftOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      textStyle: {
        color: "#ffffff"
      },
      backgroundColor: "rgba(5, 27, 98, 0.75)",
      borderColor: "rgba(2, 13, 65, 1)",
      formatter: function (params) {
        return params[0].name + " : " + params[0].value + "%";
      },
    },
    grid: [
      {
        top: "2%",
        left: "10%",
        bottom: "-10%",
        containLabel: true,
      },
    ],
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: false,
          textStyle: {
            color: "#303A4C",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: leftThreeNamePageLeft,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 12 * scale,
          },
          interval: 0,
          inside: true,
          margin: 0,
          padding: [15 * scale, 135 * scale, 10 * scale, 0],
          align: "right",
          verticalAlign: "top",
          formatter: function (value) {
            return value + "%";
          },
        },
        data: leftThreeDataPageLeft,
      },
    ],
    series: [
      {
        name: "完成率",
        type: "bar",
        zlevel: 1,
        silent: false,
        label: {
          normal: {
            color: "#FFFFFF",
            show: true,
            position: [0, -22 * scale + "px"],
            textStyle: {
              fontSize: 14 * scale,
            },
            formatter: function (a, b) {
              return a.name;
            },
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#1890FF",
              },
              {
                offset: 1,
                color: "#1EE7E7",
              },
            ]),
          },
        },
        barWidth: 10,
        data: leftThreeDataPageLeft,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-100%",
        data: [100, 100, 100, 100],
        itemStyle: {
          normal: {
            color: "rgba(48,58,76,0.4)",
            barBorderRadius: 30,
          },
        },
      },
    ],
  };
  leftChartThreeLeft.setOption(leftChartThreeLeftOption);
}

/**
 * 左三右图表
 */

function initLeftChartThreeRight(
  leftThreeNamePageRight,
  leftThreeDataPageRight,
  data,
  year
) {
  var leftChartThreeRight = echarts.init(
    document.getElementById("left-chart-three-right")
  );
  let value = data;
  let legendName = leftThreeNamePageRight;
  var img =
    "";
  var leftChartThreeRightOption = {
    color: ["rgba(32,172,76,1)", "rgba(25,120,150,1)", "rgba(31,140,127,1)"],
    backgroundColor: "#020b3d",
    title: [
      {
        text: "{a|" + value + "}",
        x: "center",
        y: "center",
        textStyle: {
          rich: {
            a: {
              fontSize: 18 * scale,
              color: "#fff",
              lineHeight: 25,
            },
          },
        },
      },
      {
        text: "{a| 人次}",
        x: "center",
        y: "51%",
        textStyle: {
          rich: {
            a: {
              fontSize: 16 * scale,
              color: "#fff",
              lineHeight: 25,
            },
          },
        },
      },
      {
        text: "糖尿病患者随访方式分类统计(" + year + ")",
        textStyle: {
          color: "#FAFFFD",
          fontSize: 15 * scale,
          fontWeight: 400,
        },
        itemGap: 20,
        x: "center",
        y: "5%",
      },
    ],
    tooltip: {
      show: true,
      trigger: "item",
      textStyle: {
        color: "#ffffff",
        fontSize: 14 * scale
      },
      backgroundColor: "rgba(5, 27, 98, 0.75)",
      borderColor: "rgba(2, 13, 65, 1)",
      formatter: "{b}:  {c}人  ({d}%)",
    },
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 100 * scale,
            height: 100 * scale,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    legend: [
      {
        icon: "circle",
        data: legendName,
        left: "center",
        bottom: "0%",
        textStyle: {
          color: "#fff",
          fontSize: 12 * scale,
        },
        itemGap: 10 * scale, //间距
        itemHeight: 13 * scale,
      },
    ],
    series: [
      {
        type: "pie",
        hoverAnimation: false,
        hoverOffset: 25,
        startAngle: 180, //起始角度
        clockwise: false, //是否顺时针
        radius: [54 * scale + "%", 66 * scale + "%"],
        center: ["center", "center"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          color: "#fff",
          fontSize: 18 * scale,
          formatter: function (params) {
            return params.name + "(" + params.value + "所)";
          },
        },
        emphasis: {
          label: {
            color: "rgb(157,251,255)",
            fontWeight: 400,
            fontSize: 12 * scale,
          },
          labelLine: {
            lineStyle: {
              color: "rgb(157,251,255)",
            },
          },
        },
        data: leftThreeDataPageRight,
        itemStyle: {
          normal: {
            borderWidth: 5, // 间距的宽度
            borderColor: "rgba(2, 11, 61,1)", //背景色
          },
        },
        zlevel: 30,
      },
    ],
  };
  leftChartThreeRight.setOption(leftChartThreeRightOption);
}

/**
 * 中间图表
 */

function initMiddleChart(middleNamePage, middleDataPage) {
  var middleChart = echarts.init(document.getElementById("middle-chart"));
  var middleChartOption = {
    // backgroundColor: '#031245',
    textStyle: {
      color: "#c0c3cd",
      fontSize: 14 * scale,
    },
    legend: {
      show: false,
    },
    tooltip: {
      trigger: "item",
      // show: true,
      textStyle: {
        color: "#ffffff",
        fontSize: 14 * scale
      },
      backgroundColor: "rgba(5, 27, 98, 0.75)",
      borderColor: "rgba(2, 13, 65, 1)",
    },
    color: ["#00ABFF", "#008ED7", "rgb(2,47,87)", "rgb(2,47,87)"],
    grid: {
      containLabel: true,
      left: 20,
      right: 20,
      bottom: 30,
      top: 40,
    },
    xAxis: {
      axisLabel: {
        color: "#FFFFFF",
        fontSize: 14 * scale,
        interval: 0,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(49,208,254,0.24)",
          width: 1,
        },
        show: true,
      },
      data: middleNamePage,
      type: "category",
    },
    yAxis: {
      axisLabel: {
        color: "#FFFFFF",
        fontSize: 14 * scale,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(49,208,254,0.24)",
        },
      },
      axisLine: {
        show: false,
      },
      name: "",
    },
    series: [
      {
        data: middleDataPage,
        type: "bar", // 柱图
        barMaxWidth: "auto",
        barWidth: 17,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 0,
                color: "#00D8FF",
              },
              {
                offset: 0.5,
                color: "#00A8FF",
              },
              {
                offset: 1,
                color: "#2A76FF",
              },
            ],
          },
        },
        label: {
          show: false,
        },
      },
      {
        data: [1, 1, 1, 1, 1, 1, 1, 1],
        type: "pictorialBar", // 底部
        barMaxWidth: "20",
        symbolOffset: [0, "50%"],
        symbolSize: [17, 5],
      },
      {
        data: middleDataPage,
        type: "pictorialBar", // 顶部
        barMaxWidth: "20",
        symbolPosition: "end",
        symbolOffset: [0, "-50%"],
        symbolSize: [17, 5],
        zlevel: 2,
      },
    ],
  };
  middleChart.setOption(middleChartOption);
}

/**
 * 右一上图表
 */

// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
  // 计算
  let midRatio = (startRatio + endRatio) / 2;
  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;
  // 如果只有一个扇形，则不实现选中效果。
  // if (startRatio === 0 && endRatio === 1) {
  //     isSelected = false;
  // }
  isSelected = false;
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3;

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x: function (u, v) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    y: function (u, v) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * 0.1;
      }
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    },
  };
}
var objData = []
function array2obj(array, key) {
  var resObj = {};
  for (var i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i];
  }
  return resObj;
}
// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData = [];
  let k =
    typeof internalDiameterRatio !== 'undefined'
      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
      : 1 / 3;

  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value;

    let seriesItem = {
      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: 1 / 10,
      },
    };

    if (typeof pieData[i].itemStyle != 'undefined') {
      let itemStyle = {};

      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
      typeof pieData[i].itemStyle.opacity != 'undefined'
        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
        : null;

      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;

    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      series[i].pieData.value
    );

    startValue = endValue;

    legendData.push(series[i].name);
  }

  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    legend: {
      left: '3%',
      top: 'center',
      orient: 'vertical',
      itemWidth: 10 * scale,
      itemHeight: 10 * scale,
      textStyle: {
        fontSize: 14 * scale,
      },
      data: legendData,
      formatter: (name) => {
        console.log(name)
        console.log(objData)
        return "{title|" + name + "}  {value|" + (objData[name].value.toFixed(2)) + "}{value|%}"
      },
      textStyle: {
        rich: {
          title: {
            fontSize: 14 * scale,
            lineHeight: 14 * scale,
            color: "#FFFEFE"
          },
          value: {
            fontSize: 14 * scale,
            lineHeight: 14 * scale,
            color: "#FFFEFE"
          }
        }
      },
    },
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {},
    grid3D: {
      viewControl: {
        autoRotate: false,
        alpha: 25, //角度(这个很重要 调节角度的)
        distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小)
        rotateSensitivity: 0, //设置为0无法旋转
        zoomSensitivity: 0, //设置为0无法缩放
        panSensitivity: 0, //设置为0无法平移
      },
      left: '20%',
      top: '-10%',
      right: '0',
      bottom: '0',
      // width: '100%',
      show: false,
      boxHeight: 20,
    },
    series: series,
  };
  return option;
}

function initRightChartOneTop(originData) {
  var rightChartOneTop = echarts.init(
    document.getElementById("right-chart-one-top")
  );
  let rightChartOneTopOption = getPie3D(originData, 0.7);
  objData = array2obj(originData, "name");
  rightChartOneTop.setOption(rightChartOneTopOption);
}

/**
 * 环形图方法
 */

function annularChart(
  idName,
  name,
  nameXPosition,
  nameYPosition,
  chartXPosition,
  chartYPosition,
  radiusBig,
  radiusSmall,
  value,
  data
) {
  var rightChartTwoRight = echarts.init(document.getElementById(idName));
  var rightChartTwoRightOption = {
    title: {
      text: name,
      x: nameXPosition,
      y: nameYPosition,
      textStyle: {
        fontSize: 16 * scale,
        color: "#fff",
        fontWeight: 400,
      },
    },
    // todo
    // tooltip: {
    //   show: true,
    //   trigger: "item",
    //   textStyle: {
    //     color: "#ffffff",
    //     fontSize: 14 * scale
    //   },
    //   backgroundColor: "rgba(5, 27, 98, 0.75)",
    //   borderColor: "rgba(2, 13, 65, 1)",
    //   formatter: "{b}:  {c}人  ({d}%)",
    // },
    angleAxis: {
      show: false,
      max: (100 * 360) / 180, //-45度到225度，二者偏移值是270度除360度
      type: "value",
      startAngle: 180, //极坐标初始角度
      splitLine: {
        show: false,
      },
    },
    barMaxWidth: 6, //圆环宽度
    radiusAxis: {
      show: false,
      type: "category",
    },
    //圆环位置和大小
    polar: {
      center: [chartXPosition, chartYPosition],
      radius: radiusBig,
    },
    series: [
      {
        type: "bar",
        stack: "测试",
        data: [
          {
            //上层圆环，显示数据
            value: value,
            name: "sdfasdf",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(0,101,255, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(46,247,254, 1)",
                },
              ]),
            },
          },
        ],
        barGap: "-100%", //柱间距离,上下两层圆环重合
        coordinateSystem: "polar",
        roundCap: true, //顶端圆角从 v4.5.0 开始支持
        z: 2, //圆环层级，同zindex
      },
      {
        //下层圆环，显示最大值
        type: "bar",
        data: [
          {
            value: 100,
            itemStyle: {
              color: {
                //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                type: "linear",
                x: 0,
                y: 0,
                x2: 1, //从左到右 0-1
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(23,54,143,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(23,54,143,1)",
                  },
                ],
              },
            },
          },
        ],
        barGap: "-100%",
        coordinateSystem: "polar",
        roundCap: true,
        z: 1,
      },
      {
        stack: "测试",
        type: "bar",
        data: [0.01],
        showBackground: false,
        coordinateSystem: "polar",
        roundCap: true,
        barWidth: 6,
        itemStyle: {
          color: "rgba(140,255,248, 1)",
          borderColor: "rgba(140,255,248, 1)",
          borderWidth: 3,
          shadowColor: "rgba(140,255,248, 1)",
          shadowBlur: 8,
          // shadowOffsetY: 2,
        },
      },
      {
        name: "外部刻度",
        type: "gauge",
        center: [chartXPosition, chartYPosition],
        radius: radiusSmall,
        min: 0, //最小刻度
        max: 100, //最大刻度
        splitNumber: 6, //刻度数量
        startAngle: -180,
        endAngle: 0,
        axisLine: {
          show: false,
          // 仪表盘刻度线
          lineStyle: {
            width: 1,
            color: [[1, "#FFFFFF"]],
          },
        },
        //仪表盘文字
        axisLabel: {
          show: false,
        }, //刻度标签。
        axisTick: {
          show: true,
          splitNumber: 7,
          lineStyle: {
            color: "#153287",
            width: 2,
          },
          length: 2,
        }, //刻度样式
        splitLine: {
          show: false,
        }, //分隔线样式
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
        title: {
          show: true,
          offsetCenter: [0, 0],
          textStyle: {
            fontSize: 16 * scale,
            color: "#1AFCFF",
          },
        },
        data: [
          {
            value: 100,
            name: data,
          },
        ],
      },
    ],
  };
  rightChartTwoRight.setOption(rightChartTwoRightOption);
}

/**
 * 右二图表
 */
function initRightChartTwo(rightTwoData) {
  var domName = [
    "box-two-item-one",
    "box-two-item-two",
    "box-two-item-three",
    "box-two-item-four",
    "box-two-item-five",
    "box-two-item-six",
  ];

  rightTwoData.forEach((v, i) => {
    annularChart(
      domName[i],
      v.name,
      "center",
      "bottom",
      "center",
      "65%",
      "180%",
      "90%",
      v.data,
      v.percent
    );
  });
}

/**
 * 右三图表
 */

/**
 *  肺结核及严重精神障碍方法
 */
function psychogeny(idName, data, img) {
  var rightChartThreeLeft = echarts.init(document.getElementById(idName));
  let color = ["#00A4F2", "#24A653"];
  let chartData = data;
  let arrName = [];
  let arrValue = [];
  let sum = 0;
  let pieSeries = [],
    lineYAxis = [];

  // 数据处理
  chartData.forEach((v, i) => {
    arrName.push(v.name);
    arrValue.push(v.value);
    sum = sum + v.value;
  });

  // 图表option整理
  chartData.forEach((v, i) => {
    pieSeries.push({
      name: "设备",
      type: "pie",
      clockWise: false,
      hoverAnimation: false,
      radius: [78 - i * 15 + "%", 75 - i * 15 + "%"],
      center: ["43%", "center"],
      label: {
        show: false,
      },
      data: [
        {
          value: v.value,
          name: v.name,
        },
        {
          value: sum - v.value,
          name: "",
          itemStyle: {
            color: "rgba(0,0,0,0)",
          },
          tooltip: {
            show: false,
          },
        },
      ],
    });
    pieSeries.push({
      name: "",
      type: "pie",
      silent: true,
      z: 1,
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [78 - i * 15 + "%", 75 - i * 15 + "%"],
      center: ["43%", "center"],
      label: {
        show: false,
      },
      data: [
        {
          value: 7.5,
          itemStyle: {
            color: "rgba(23,54,143,0.7)",
          },
        },
        {
          value: 2.5,
          name: "",
          itemStyle: {
            color: "rgba(0,0,0,0)",
          },
          tooltip: {
            show: false,
          },
        },
      ],
    });
    v.percent = ((v.value / sum) * 100).toFixed(2) + "%";
    lineYAxis.push({
      value: i,
      textStyle: {
        rich: {
          circle: {
            color: color[i],
            padding: [0, 5],
          },
        },
      },
    });
  });
  var rightChartThreeLeftOption = {
    // backgroundColor: "#fff",
    color: color,
    grid: {
      top: "8%",
      bottom: "76%",
      left: "37%",
      containLabel: false,
    },
    tooltip: {
      show: true,
      trigger: "item",
      textStyle: {
        color: "#ffffff",
        fontSize: 14 * scale
      },
      backgroundColor: "rgba(5, 27, 98, 0.75)",
      borderColor: "rgba(2, 13, 65, 1)",
      formatter: "{b}:  {c}人)",
    },
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 80 * scale,
            height: 80 * scale,
          },
          left: "26%",
          top: "center",
        },
      ],
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: function (params) {
            let item = chartData[params];
            return (
              "{line|}{circle|●}{name|" +
              item.name +
              "}{bd|}{percent|" +
              item.percent +
              "}"
            );
          },
          interval: 0,
          inside: true,
          textStyle: {
            color: "#FAFFFD",
            fontSize: 12 * scale,
            rich: {
              name: {
                color: "#FAFFFD",
                fontSize: 12 * scale,
              },
              bd: {
                color: "#FAFFFD",
                padding: [0, 2],
                fontSize: 12 * scale,
              },
              percent: {
                color: "#FAFFFD",
                fontSize: 12 * scale,
              },
              value: {
                color: "#FAFFFD",
                fontSize: 12 * scale,
                fontWeight: 500,
                padding: [0, 0, 0, 20],
              },
              unit: {
                fontSize: 14 * scale,
              },
            },
          },
          show: true,
        },
        data: lineYAxis,
      },
    ],
    xAxis: [
      {
        show: false,
      },
    ],
    series: pieSeries,
  };
  rightChartThreeLeft.setOption(rightChartThreeLeftOption);
}

/**
 * 初始化所有图表
 */
function initChart() {
  // 左一图表
  var leftOneNamePage = [
    "电子建档率",
    "规范管理率",
    "动态使用率",
    "档案开放率",
  ];
  var leftOneDataPage = [889, 500, 441, 451];
  initLeftChartOne(leftOneNamePage, leftOneDataPage);

  // 左二左图表
  var leftTwoNamePageLeft = [
    "高血压管理率",
    "高血压规范管理率",
    "高血压控制达标率",
  ];
  var leftTwoDataPageLeft = [50.5, 50, 50];
  initLeftChartTwoLeft(leftTwoNamePageLeft, leftTwoDataPageLeft);

  // 左二右图表
  var leftTwoNamePageRight = ["家庭访视", "电话追踪", "门诊就诊"];
  var leftTwoDataPageRight = [
    {
      value: 13,
      name: "家庭访视",
    },
    {
      value: 6,
      name: "电话追踪",
    },
    {
      value: 18,
      name: "门诊就诊",
    },
  ];
  initLeftChartTwoRight(
    leftTwoNamePageRight,
    leftTwoDataPageRight,
    343619,
    2024
  );

  // 左三图表
  // var leftThreeNamePage = [
  //   "糖尿病管理率",
  //   "糖尿病规范管理率",
  //   "糖尿病控制达标率",
  // ];
  // var leftThreeDataPage = [50.5, 50, 50];
  // var rightThreeNamePage = ["家庭访视", "电话追踪", "门诊就诊"];
  // var rightThreeDataPage = [
  //   {
  //     value: 13,
  //     name: "家庭访视",
  //   },
  //   {
  //     value: 6,
  //     name: "电话追踪",
  //   },
  //   {
  //     value: 18,
  //     name: "门诊就诊",
  //   },
  // ];
  // initLeftChartThree(
  //   leftThreeNamePage,
  //   leftThreeDataPage,
  //   rightThreeNamePage,
  //   rightThreeDataPage,
  //   2024
  // );

  // 左二左图表
  var leftThreeNamePageLeft = [
    "糖尿病管理率",
    "糖尿病规范管理率",
    "糖尿病控制达标率",
  ];
  var leftThreeDataPageLeft = [50.5, 50, 50];
  initLeftChartThreeLeft(leftThreeNamePageLeft, leftThreeDataPageLeft);

  // 左二右图表
  var leftThreeNamePageRight = ["家庭访视", "电话追踪", "门诊就诊"];
  var leftThreeDataPageRight = [
    {
      value: 13,
      name: "家庭访视",
    },
    {
      value: 6,
      name: "电话追踪",
    },
    {
      value: 18,
      name: "门诊就诊",
    },
  ];
  initLeftChartThreeRight(
    leftThreeNamePageRight,
    leftThreeDataPageRight,
    343619,
    2024
  );

  // 中间图表
  var middleNamePage = [
    "严重精神障碍",
    "老年人",
    "0-6岁儿童",
    "孕产妇",
    "残疾人",
    "贫困户",
    "低保户",
    "失独残独",
  ];
  var middleDataPage = [200, 85, 112, 275, 305, 408, 123, 520];
  initMiddleChart(middleNamePage, middleDataPage);

  //右一上图表
  var rightChartOneTopData = [
    {
      name: '老年人健康管理率',
      value: 93.2233,
      itemStyle: {
        color: '#20AC4C',
      },
    },
    {
      name: '老年人规范管理率',
      value: 64.0159,
      itemStyle: {
        color: '#39a1f7',
      },
    },
    {
      name: '老年人中医药管理率',
      value: 30.2358,
      itemStyle: {
        color: '#DF8A44',
      },
    },
  ]
  initRightChartOneTop(rightChartOneTopData);

  // 右一左下
  annularChart(
    "right-chart-one-bottom-left",
    "老年人健康体检完整率",
    "center",
    "bottom",
    "center",
    "65%",
    "230%",
    "110%",
    "68",
    "63.62%"
  );

  // 右一右下
  annularChart(
    "right-chart-one-bottom-right",
    "老年人体检无异常率",
    "center",
    "bottom",
    "center",
    "65%",
    "230%",
    "110%",
    "10",
    "6.72%"
  );

  // 右二图表
  var rightTwoData = [
    {
      name: "孕产妇早孕建册率",
      data: "58",
      percent: "58.73%",
    },
    {
      name: "产后访视率",
      data: "90",
      percent: "90.92%",
    },
    {
      name: "0-6岁儿童管理率",
      data: "45",
      percent: "79.1%",
    },
    {
      name: "新生儿访视率",
      data: "73",
      percent: "52.73%",
    },
    {
      name: "儿童中医药管理率",
      data: "65",
      percent: "45.73%",
    },
    {
      name: "儿童眼保健覆盖率",
      data: "30",
      percent: "30.73%",
    },
  ];
  initRightChartTwo(rightTwoData);
  var phthisis = ""
  var severMentalDisorder = ""
  // 右三左图表
  psychogeny("right-chart-three-left", [
    {
      name: "规则服药率",
      value: 150,
      unit: "个",
    },
    {
      name: "健康管理率",
      value: 289,
      unit: "个",
    },
  ], phthisis);

  // 右三右图表
  psychogeny("right-chart-three-right", [
    {
      name: "规则服药率",
      value: 10,
      unit: "个",
    },
    {
      name: "健康管理率",
      value: 10,
      unit: "个",
    },
  ], severMentalDisorder);
}
